<template>
  <div class="detail-box">

    <div class="banner-box" ref="banner">
      <!--轮播-->
      <banner :listImg="roleInfo.realImgs" :type="0"></banner>

      <!--电话-->
      <a :href="'tel:'+roleInfo.mobile" :style="{top:aTop+'px'}">
        <img src="../../assets/images/tel-icon.png" alt="">
        <!--<span>{{roleInfo.mobile}}</span>-->
      </a>
    </div>
    <div class="discribtion-box">
      <div class="name-distance">
        <span class="name">{{roleInfo.name}}</span>
        <span class="distance-info">距离 <span>{{roleInfo.juli}}</span></span>
      </div>
      <div class="summary" :class="{ato:flexible}">{{roleInfo.selfInfo}}</div>
      <!--<div class="flexible" @click="flexible=!flexible">-->
      <!--<i class="arrow-down" :class="{up:flexible}"></i>-->
      <!--<span v-if="!flexible">展开</span>-->
      <!--<span v-else>收起</span>-->
      <!--</div>-->
      <div class="visit">
        <span class="v-text">今日访问量 <span class="v-num">{{amount.dayAmount}}</span></span>
        <span class="v-text">总访问量 <span class="v-num">{{amount.allAmount}}</span></span>
      </div>
    </div>
    <!--简介-->
    <div class="content-box">
      <div class="sub-head">
        <span class="b-l">简介</span>
      </div>
      <div class="cb-content">
        <div class="cc-row">
          <!--<div class="cc-col">-->
            <!--<span class="cc-title">编号</span>-->
            <!--<span class="cc-text">{{roleInfo.code}}</span>-->
          <!--</div>-->
          <div class="cc-col">
            <span class="cc-title">姓名</span>
            <span class="cc-text">{{roleInfo.name}}</span>
          </div>
          <div class="cc-col" >
            <span class="cc-title">性别</span>
            <span class="cc-text">{{roleInfo.sex==1?'男':roleInfo.sex==2?'女':roleInfo.sex}}</span>
          </div>
        </div>
        <div class="cc-row">
          <div class="cc-col">
            <span class="cc-title">区域</span>
            <span class="cc-text">{{roleInfo.serverArea}}</span>
          </div>
          <div class="cc-col">
            <span class="cc-title">年龄</span>
            <span class="cc-text">{{roleInfo.age}}岁</span>
          </div>
        </div>
        <div class="cc-row">
          <div class="cc-col">
            <span class="cc-title">身高</span>
            <span class="cc-text">{{roleInfo.height}}cm</span>
          </div>
          <div class="cc-col">
            <span class="cc-title">体重</span>
            <span class="cc-text">{{roleInfo.weight}}kg</span>
          </div>
        </div>
        <div class="cc-row">
          <div class="cc-col">
            <span class="cc-title">籍贯</span>
            <span class="cc-text">{{roleInfo.birth}}</span>
          </div>
          <div class="cc-col">
            <span class="cc-title">学历</span>
            <span class="cc-text">{{roleInfo.educate}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 我的排名-->
    <div class="content-box">
      <div class="sub-head">
        <span class="b-l">我的排名</span>
      </div>
      <div class="cb-content">
        <ul class="tab-box">
          <li v-for="(item,index) in sortName" @click="isName=index,changeTab(index)">
            <span :class="{on:isName==index}">{{item}}</span>
          </li>
        </ul>
        <!--tab内容切换区域-->
        <div class="tab-content">
          <template v-if="isName==0">
            <ul class="sort-num">
              <li>
                <p class="p1-color">
                  <span class="sn-num"> <countup :start-val="999" :end-val="dayRankl" :duration="2"></countup></span> 名
                </p>
                <p>本地排名</p>
              </li>
              <li>
                <p class="p2-color">
                  <span class="sn-num"><countup :start-val="999" :end-val="dayRankr" :duration="2"></countup></span>名
                </p>
                <p>全国排名</p>
              </li>
            </ul>
          </template>
          <template v-if="isName==1">
            <ul class="sort-num">
              <li>
                <p class="p1-color">
                  <span class="sn-num"> <countup :start-val="0" :end-val="moonRankl" :duration="2"></countup></span> 名
                </p>
                <p>本地排名</p>
              </li>
              <li>
                <p class="p2-color">
                  <span class="sn-num"><countup :start-val="0" :end-val="moonRankr" :duration="0"></countup></span>名
                </p>
                <p>全国排名</p>
              </li>
            </ul>
          </template>
          <template v-if="isName==2">
            <ul class="sort-num">
              <li>
                <p class="p1-color">
                  <span class="sn-num"> <countup :start-val="999" :end-val="yealRankl" :duration="0"></countup></span> 名
                </p>
                <p>本地排名</p>
              </li>
              <li>
                <p class="p2-color">
                  <span class="sn-num"><countup :start-val="999" :end-val="yealRankr" :duration="0"></countup></span>名
                </p>
                <p>全国排名</p>
              </li>
            </ul>
          </template>
        </div>
      </div>
    </div>
    <!-- 评论-->
    <div class="content-box">
      <div class="sub-head">
        <span class="b-l">评论</span>
        <div class="more-info">
          <router-link :to="'/usercomments?id='+roleInfo.uid+'&type=2'">
            <span>更多评论</span> <i class="arrow-right"></i>
          </router-link>
        </div>
      </div>
      <div class="cb-content">
        <!--评论标签-->
        <!--<ul class="user-comment">-->
          <!--<li :style="{background:libg[Math.floor(Math.random()*10)]}" v-for="(tag,index) in userComment">{{tag}}</li>-->
        <!--</ul>-->
        <!--显示1条用户评论-->
        <div class="user-box" v-show="isShow">
          <div class="avatar-name">
            <div class="user-avatar">
              <img :src="pinglun.headImg" alt="">
            </div>
            <span class="user-name">{{pinglun.nickName}}</span>
          </div>
          <div class="user-text">
            {{pinglun.content}}
          </div>
        </div>
        <div class="user-box" v-show="!isShow" style="padding: 10px;">
          暂无评论
        </div>
      </div>
    </div>
    <!--页面底部-->
    <div class="cur-footer">
      <div class="row">
        <div class="col2" @click="follow()">
          <template v-if="isFollow">
            <img src="../../assets/images/follow.png" alt=""/>
            <p>关注</p>
          </template>
          <template v-else>
            <img src="../../assets/images/follow_selected.png" alt=""/>
            <p style="color:#d44242;">已关注</p>
          </template>
        </div>
        <div class="col10">
          <div class="btn-box" @click="orderSommelier()">
            <img src="../../assets/images/order.png" alt="">

            <span v-if="roleInfo.level==3">预约</span>
            <span v-else="roleInfo.level>3">购买</span>
          </div>
          <div class="btn-box award" @click="awardSommelier()" >
            <img src="../../assets/images/award.png" alt="">
            <span>打赏</span>
          </div>
        </div>
      </div>
    </div>
    <!--回首页-->
    <go-home></go-home>
  </div>
</template>
<!--<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
<script>
  import Banner from '../public/banner.vue'
  import {Countup} from "vux"
  import global from '../public/global.vue'

  export default {
    name: 'sommelierDetail',
    components: {
      "banner": Banner,
      "countup": Countup,
    },
    data() {
      return {

        flexible: false,
        sortName: ["今天排名", "当月排名", "今年排名"],
        isName: 0,
        userComment: ["性价比高", "口感优良纯正", "很好喝", "太喜欢了", "再来三杯", "满意"],//用户评论标签内容
        libg: global.libg,
        isFollow: true,
        roleInfo: {},//角色信息
        dayRankl: 0,
        dayRankr: 0,
        moonRankl: 0,
        moonRankr: 0,
        yealRankl: 0,
        yealRankr: 0,
        pinglun: {},
        isShow: false,
        amount: {},
        realImgs:[],
      }
    },
    methods: {
      //排名标签切换
      changeTab(idx) {
        console.log(idx);
      },
      // 是否关注
      hasFollow() {
        let self = this;
        let agentId = this.$route.query.id
        let url = global.apiUrl + "/sommelier";
        let uid = global.getCookie("uid");
        self.$http.get(url + '/hasFollow', {
          params: {
            uid: uid,
            agentId: agentId
          }
        }).then(res => {
          if (res.data.code == 0) {
            console.log(res.data.data);
            if (res.data.data != null) {
              this.isFollow = false;

            }

          }
        }).catch(function (err) {
          console.error(err);
        })
      },
      //预约
      orderSommelier() {
        console.log(this.$route.query.id);
        let level = this.roleInfo.level;
        let name=this.roleInfo.name;
        let pingjians=new Object();
        pingjians.name=this.roleInfo.name;
        pingjians.level=this.roleInfo.level;
        pingjians.id=this.roleInfo.uid;
        pingjians.realImg=this.roleInfo.imageUrl;
        window.localStorage.setItem("pingjians",JSON.stringify(pingjians));
        this.$router.push({path: "/shop?id=" + this.$route.query.id + '&level=' + level});

      },
      //打赏
      awardSommelier() {
        let agentId = this.$route.query.id
        this.$router.push({path: '/sommelierAward?id=' + agentId});
      },
      follow() {
        let uid = global.getCookie("uid");
        let agentId = this.$route.query.id;
        let params = new URLSearchParams();
        params.append("uid", uid);
        params.append("agentId", agentId);
        this.$http({
          url: global.apiUrl + '/sommelier/follow',
          method: 'post',
          data: params,
        }).then(res => {
          console.log(res);
          if (res.data.data == 0) {
            this.isFollow = true;
            //alert("取消关注")
          } else {
            this.isFollow = false;
            //alert("关注成功")
          }

        }).catch(function (err) {
          console.error(err);
        });
      }
    },
    //页面创建完成
    created: function () {

      let self = this;
      let id = this.$route.query.id;
      var p1=window.localStorage.getItem("latlng").split(",");

      var uid = this.$route.query.uid;
      if (uid != undefined) {
        window.localStorage.setItem("shareId",uid);
        setTimeout(() => {
          window.location.href="http://www.yingla9.com/dist/#/sommelierDetail?id="+id;
        }, 300)

      }
      if(window.localStorage.getItem("shareId")!=null){
        global.bindRelation(window.localStorage.getItem("shareId"),this)
      }

      let text="http://www.yingla9.com/dist/#/sommelierDetail?id="+id+"&uid="+window.localStorage.getItem("uid");
      global.wxShare("http://www.yingla9.com/dist/#/sommelierDetail?id="+id, "品鉴师详情", text,self);
      //获取角色uid详情
      let url = global.apiUrl + "/sommelier";

      self.$http.get(url + '/sommelierInfo', {
        params: {
          id: id,
        }
      }).then(res => {
        if (res.data.code == 0) {

          self.roleInfo = res.data.data;
          if(roleInfo.realImgs>0){
            this.realImgs = roleInfo.realImgs
          }else{
            this.realImgs = roleInfo.imageUrl
          }
          if(res.data.data.level==3){
            document.title = "侍酒师详情";
          }else{
            document.title = "品鉴师详情";
          }

          let p2=new Array();
          p2[0]=res.data.data.longitude;
          p2[1]=res.data.data.latitude;
          let dis = AMap.GeometryUtil.distance(p1, p2);
          if(dis<1000){
            if(dis<10){
              self.roleInfo.juli="贼近";
            }else{
              self.roleInfo.juli=dis.toFixed(1)+"m";
            }

          }else{
            self.roleInfo.juli=(dis/1000).toFixed(2)+"km";
          }
        }
      }).catch(function (err) {
        console.error(err);
      })
      this.hasFollow();

      //获取今日排名
      this.$http.get(url + '/sommelierRank?uid=' + id + "&type=1").then(res => {
        self.dayRankl = res.data.data.localRank;
        self.dayRankr = res.data.data.nationalRank;

      })
      this.$http.get(url + '/sommelierRank?uid=' + id + "&type=2").then(res => {
        self.moonRankl = res.data.data.localRank;
        self.moonRankr = res.data.data.nationalRank;

      })
      this.$http.get(url + '/sommelierRank?uid=' + id + "&type=3").then(res => {
        self.yealRankl = res.data.data.localRank;
        self.yealRankr = res.data.data.nationalRank;

      })

      //获取评论
      this.$http.get(url + '/getEvaluate?agentId=' + id).then(res => {
        if (res.data.data != "") {

          self.pinglun = res.data.data[0];
          self.isShow = true;
        }

      })

      //流量+1
      this.$http.get(url + '/setAmount?agent=' + id).then(res => {
        //获取流量
        this.$http.get(url + '/getAmount?agent=' + id).then(res => {
          self.amount = res.data.data;
        })
      })
    },
    //DOM挂载完毕
    mounted() {
      //动态设置图片高度=设备宽度
      let width = document.body.clientWidth;
      this.$refs.banner.style.height = width + 'px';
    },
    computed: {
      aTop: function () {
        return document.body.clientWidth - 60;
      }
    }

  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

  .detail-box {
    padding-bottom: 58px;
  }

  .detail-box {
    background: #f3f3f3;
    .banner-box {
      position: relative;
      width: 100%;
      /*height: 15rem;*/
      a {
        display: inline-block;
        position: absolute;
        /*top: 11.5rem;*/
        right: 0;
        padding: 2px 5px;
        color: #fff;
        border-bottom-left-radius: 30px;
        border-top-left-radius: 30px;
        background: rgba(0, 0, 0, .4);
        z-index: 10;
        img {
          width: 20px;
          margin: 0 5px;
          vertical-align: middle;
        }
        span {
          vertical-align: middle;
        }
      }
    }
    .discribtion-box {
      width: 100%;
      padding: 10px;
      background: #fff;
      margin-bottom: 10px;
      .name-distance {
        line-height: 2rem;
        display: flex;
        justify-content: space-between;
        .name {
          font-size: 1rem;
          font-weight: bold;
        }
        .distance-info {
          font-size: 0.8rem;
          color: #D44242;
        }
      }
      .summary {
        width: 100%;
        min-height: 1rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 0.8rem;
        color: #aaa;
      }
      .flexible {
        width: 100%;
        height: 1.5rem;
        line-height: 1.5rem;
        text-align: right;
        font-size: 0.9rem;
        color: #777;
        .arrow-down {
          display: inline-block;
          width: 0.6rem;
          height: 0.6rem;
          border-left: 1px solid #aaa;
          border-bottom: 1px solid #aaa;
          margin-right: 0.5rem;
          transform: rotateZ(-45deg);
        }
        .up {
          transform: rotateZ(135deg);
          vertical-align: text-bottom;
        }
        span {
          vertical-align: middle;
        }
      }
      .ato {
        display: block;
        height: auto;
      }
      .visit {
        width: 100%;
        height: 1rem;
        line-height: 1rem;
        .v-text {
          font-size: 0.8rem;
          font-weight: bold;
          .v-num {
            font-weight: normal;
            color: #d44242;
          }
        }
      }
    }
    /*简介*/
    .content-box {
      width: 100%;
      /*padding: 0 10px;*/
      background: #fff;
      margin-bottom: 10px;
      font-size: 1rem;
      .sub-head {
        width: 100%;
        padding: 15px 10px 5px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        .b-l {
          display: inline-block;
          height: 16px;
          line-height: 16px;
          padding-left: 5px;
          border-left: 4px solid #D44242;
        }
        .more-info {
          line-height: 19px;
          a {
            font-size: 0.9rem;
            color: #D44242;
            span {
              vertical-align: top;
            }
            .arrow-right {
              display: inline-block;
              width: 10px;
              height: 10px;
              border-top: 2px solid #D44242;
              border-right: 2px solid #D44242;
              margin-left: -4px;
              transform: rotateZ(45deg) scale(0.6);
            }
          }
        }
      }
      .cb-content {
        width: 100%;
        padding: 0 10px;
        border-top: 1px solid #ddd;
        .cc-row {
          display: flex;
          .cc-col {
            width: 50%;
            height: 3rem;
            line-height: 3rem;
            font-size: 0.9rem;
            border-bottom: 1px solid #f3f3f3;
            white-space: nowrap;
            .cc-title {
              color: #aaa;
              margin-right: 5px;
              overflow: auto;
            }
            .cc-text {
              display: inline-block;
              width: 70%;
              color: #333;
              overflow: auto;
              vertical-align: top;
            }
            .cc-text::-webkit-scrollbar {
              display: none;
            }
          }
        }
        /*我的排名*/
        .tab-box {
          width: 100%;
          height: 2.6rem;
          line-height: 2.6rem;
          border-bottom: 1px solid #f3f3f3;
          display: flex;
          li {
            width: 33.33%;
            text-align: center;
            font-size: 1rem;
            span {
              display: inline-block;
              height: 100%;
              color: #aaa;
              box-sizing: border-box;
            }
            .on {
              font-weight: bold;
              color: #d44242;
              border-bottom: 2px solid #d44242;
            }
          }
        }
        .tab-content {
          .sort-num {
            height: 6rem;
            display: flex;
            li {
              width: 50%;
              padding-top: 1rem;
              text-align: center;
              p {
                font-size: 0.9rem;
              }
              .p1-color {
                color: #F46464;
                .sn-num {
                  font-size: 2rem;
                }
              }
              .p2-color {
                color: #BF98EC;
                .sn-num {
                  font-size: 2rem;
                }
              }
            }
          }
        }
        /*评论*/
        .user-comment {
          width: 100%;
          padding-top: 10px;
          display: flex;
          flex-wrap: wrap;
          li {
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: 0.8rem;
            color: #fff;
            background: #F680B8;
            text-align: center;
            margin-left: 10px;
            margin-bottom: 10px;
            border-radius: 30px;
            padding: 0 10px;
          }
        }
        /*显示1条用户评论*/
        .user-box {
          width: 100%;
          padding-bottom: 10px;
          .avatar-name {
            width: 100%;
            margin: 10px auto;
            .user-avatar {
              display: inline-block;
              width: 2rem;
              height: 2rem;
              background: #f7f7f7;
              border-radius: 50%;
              vertical-align: middle;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .user-name {
              display: inline-block;
              font-size: 0.9rem;
              font-weight: bold;
            }
          }
          .user-text {
            font-size: 0.8rem;
            color: #aaa;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
    /*页面底部*/
    .cur-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 54px;
      border-top: 1px solid #eee;
      background: #fff;
      font-size: 1rem;
      .row {
        width: 100%;
        padding: 4px 0;
        display: flex;
        .col2 {
          width: 25%;
          height: 46px;
          border-right: 1px solid #ddd;
          text-align: center;
          img {
            width: 1.2rem;
          }
          p {
            line-height: 0.9rem;
            font-size: 0.9rem;
            color: #aaa;
          }
        }
        .col10 {
          width: 75%;
          height: 46px;
          line-height: 46px;
          text-align: center;
          .btn-box {
            display: inline-block;
            width: 40%;
            height: 30px;
            line-height: 30px;
            background: #21A5EA;
            border-radius: 30px;
            font-size: 1rem;
            img {
              width: 1.2rem;
              height: 1rem;
              vertical-align: middle;
            }
            span {
              color: #fff;
              vertical-align: middle;
            }
          }
          .award {
            margin-left: 5%;
            background: #D44242;
            img {
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
</style>
